
<!DOCTYPE html>
<html lang="en" class="no-js">

    <head>

        <meta charset="utf-8">
        <title>shouye</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- CSS -->
        <link rel="stylesheet" href="assets/css/reset.css">
        <link rel="stylesheet" href="assets/css/supersized.css">
        <link rel="stylesheet" href="assets/css/style.css">

        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

        <link rel="stylesheet" type="text/css" href="css/normalize.css" />
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/icons.css" />
        <link rel="stylesheet" type="text/css" href="css/component.css" />

        <script src="js/modernizr.custom.js"></script>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <link rel="Stylesheet" type="text/css" href="style/loginDialog.css" />
        <style type="text/css">
        .mainztf{
            height: 80%;
            width: 70%;
           
            margin:0px auto;
        }
        .bottom{
            height:2%;
            width: 30%;
            margin:9% auto;
        }
        </style>
    </head>

    <body>
        <div id="LoginBox">
        <div class="row1">
            small class登录<a href="javascript:void(0)" title="关闭窗口" class="close_btn" id="closeBtn">×</a>
        </div>
        <div class="row">
            用户名: <span class="inputBox">
                <input type="text" id="txtName" placeholder="账号/邮箱" />
            </span><a href="javascript:void(0)" title="提示" class="warning" id="warn">*</a>
        </div>
        <div class="row">
            密&nbsp;&nbsp;&nbsp;&nbsp;码: <span class="inputBox">
                <input type="text" id="txtPwd" placeholder="密码" />
            </span><a href="javascript:void(0)" title="提示" class="warning" id="warn2">*</a>
        </div>
        <div class="row">
            <a href="#" id="loginbtn">登录</a>
        </div>
    </div>
        <div id="st-container" class="st-container">        
            <!-- content push wrapper -->
            <div class="st-pusher">
                <!--    
                    example menus 
                    these menus will be under the push wrapper
                -->
                <nav class="st-menu st-effect-3" id="menu-3">
                    <h2 >OUR CLASS</h2>
                    <ul>
                        <li><a href="#" id="example">sign up</a></li>
                        <li><a href="#">Location</a></li>
                        <li><a href="#">Study</a></li>
                        <li><a href="#">Collections</a></li>
                        <li><a href="#">Credits</a></li>
                    </ul>
                </nav>
                <div class="mainztf">
                                <br><bar><br><bar><br><bar><br><bar>
                                <br><bar><br><bar><br><bar><br><bar><br><bar>
                                <br><bar><br><bar>   
                                <h1>Welcome To Our <br><br></b>Micro class learning platform</h1>
                                <br>
                                <button>come on</button>  
                                <br><br>
                                <div id="st-trigger-effects" >                                
                                    <button data-effect="st-effect-3">Push</button>                                
                                </div>
                            
                </div>           
                <div class="bottom">ahdfjlaljasd asdhasi u @21354 dffhlkahfihua</div>            
                    
            </div><!-- /st-pusher -->
        </div><!-- /st-container -->
		<script type="text/javascript">
    $(function ($) {
        //弹出登录
        $("#example").hover(function () {
            $(this).stop().animate({
                opacity: '1'
            }, 600);
        }, function () {
            $(this).stop().animate({
                opacity: '0.6'
            }, 1000);
        }).on('click', function () {
            $("body").append("<div id='mask'></div>");
            $("#mask").addClass("mask").fadeIn("slow");
            $("#LoginBox").fadeIn("slow");
        });
        //
        //按钮的透明度
        $("#loginbtn").hover(function () {
            $(this).stop().animate({
                opacity: '1'
            }, 600);
        }, function () {
            $(this).stop().animate({
                opacity: '0.8'
            }, 1000);
        });
        //文本框不允许为空---按钮触发
        $("#loginbtn").on('click', function () {
            var txtName = $("#txtName").val();
            var txtPwd = $("#txtPwd").val();
            if (txtName == "" || txtName == undefined || txtName == null) {
                if (txtPwd == "" || txtPwd == undefined || txtPwd == null) {
                    $(".warning").css({ display: 'block' });
                }
                else {
                    $("#warn").css({ display: 'block' });
                    $("#warn2").css({ display: 'none' });
                }
            }
            else {
                if (txtPwd == "" || txtPwd == undefined || txtPwd == null) {
                    $("#warn").css({ display: 'none' });
                    $(".warn2").css({ display: 'block' });
                }
                else {
                    $(".warning").css({ display: 'none' });
                }
            }
        });
        //文本框不允许为空---单个文本触发
        $("#txtName").on('blur', function () {
            var txtName = $("#txtName").val();
            if (txtName == "" || txtName == undefined || txtName == null) {
                $("#warn").css({ display: 'block' });
            }
            else {
                $("#warn").css({ display: 'none' });
            }
        });
        $("#txtName").on('focus', function () {
            $("#warn").css({ display: 'none' });
        });
        //
        $("#txtPwd").on('blur', function () {
            var txtName = $("#txtPwd").val();
            if (txtName == "" || txtName == undefined || txtName == null) {
                $("#warn2").css({ display: 'block' });
            }
            else {
                $("#warn2").css({ display: 'none' });
            }
        });
        $("#txtPwd").on('focus', function () {
            $("#warn2").css({ display: 'none' });
        });
        //关闭
        $(".close_btn").hover(function () { $(this).css({ color: 'black' }) }, function () { $(this).css({ color: '#999' }) }).on('click', function () {
            $("#LoginBox").fadeOut("fast");
            $("#mask").css({ display: 'none' });
        });
    });
    </script>   
    
        <!-- Javascript -->
        <script src="assets/js/jquery-1.8.2.min.js"></script>
        <script src="assets/js/supersized.3.2.7.min.js"></script>
        <script src="assets/js/supersized-init.js"></script>
        <script src="assets/js/scripts.js"></script>
        <script src="js/classie.js"></script>
        <script src="js/sidebarEffects.js"></script>
    </body>

</html>

